<template>
    <el-drawer
      v-model="drawerVisible"
      title="检查项目列表"
      :direction="drawerDirection"
      :size="drawerSize"
      :before-close="handleBeforeClose"
    >
      <div class="search-bar">
        <span>关键字</span>
        <el-input v-model="searchKeyword" placeholder="请输入关键字" />
        <el-button type="primary" @click="searchItems">Q 搜索</el-button>
        <el-button @click="resetSearch">🔄 重置</el-button>
      </div>
      <el-table :data="checkItems" style="width: 100%">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="id" label="项目费用ID"></el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="keyword" label="关键字"></el-table-column>
        <el-table-column prop="price" label="项目单价"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
      </el-table>
      <el-button type="primary" block @click="addAndClose">√ 添加并关闭</el-button>
    </el-drawer>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElDrawer, ElInput, ElButton, ElTable, ElTableColumn } from 'element-plus';
  
  // 控制抽屉显示隐藏
  const drawerVisible = ref(false);
  // 抽屉方向（这里是右侧滑出）
  const drawerDirection = ref('right');
  // 抽屉大小
  const drawerSize = ref('400px');
  
  // 模拟检查项目数据
  const checkItems = ref([
    { id: 1, name: '乙肝五项', keyword: 'ygwx', price: 30, unit: '次' },
    { id: 2, name: '血常规', keyword: 'xcg', price: 5, unit: '次' },
    { id: 3, name: 'CT', keyword: 'ct', price: 50, unit: '次' },
    { id: 4, name: 'X光', keyword: 'xg', price: 20, unit: '次' }
  ]);
  
  // 搜索关键字
  const searchKeyword = ref('');
  
  // 搜索方法
  const searchItems = () => {
    // 这里可以实现实际的搜索逻辑，目前简单返回全部数据
    console.log('执行搜索操作，关键字：', searchKeyword.value);
  };
  
  // 重置搜索方法
  const resetSearch = () => {
    searchKeyword.value = '';
    console.log('执行重置操作');
  };
  
  // 关闭抽屉前的回调
  const handleBeforeClose = (done) => {
    done();
  };
  
  // 添加并关闭抽屉方法
  const addAndClose = () => {
    console.log('执行添加并关闭操作');
    drawerVisible.value = false;
  };
  
  // 对外暴露打开抽屉的方法
  const openDrawer = () => {
    drawerVisible.value = true;
  };
  
  // 对外暴露关闭抽屉的方法
  const closeDrawer = () => {
    drawerVisible.value = false;
  };
  
  // 导出相关方法和变量
  defineExpose({
    openDrawer,
    closeDrawer
  });
  </script>
  
  <style scoped>
  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .search-bar span {
    margin-right: 10px;
  }
  </style>